// 定义一个名为 ReaderQueryForm 的对象，用作 Vue 组件
const ReaderQueryForm = {
    // 组件名称
    name: 'ReaderQueryForm',
    // 组件模板
    template: `  
   <div>
    <form class="reader-query-form" @submit.prevent="onSearch">  
    <div class="form-item"><input v-model="query.readerNumber" placeholder="学号/工号" type="text" /></div>  
    <div class="form-item"><input v-model="query.name" placeholder="姓名" type="text" /></div>  
    <div class="form-item"><input v-model="query.gradeMajor" placeholder="年级专业" type="text" /></div>  
    <div class="form-item">  
        <select v-model="query.type" placeholder="读者类型">
            <option value="">全部类型</option>
            <option value="1">学生</option>
            <option value="2">职工</option>
        </select>  
    </div>  
    <div class="form-item">  
        <select v-model="query.status" placeholder="读者状态">
            <option value="">全部状态</option>
            <option value="1">活跃</option>
            <option value="0">禁用</option>
        </select>  
    </div>  


    <div class="form-item">  
        <input v-model="query.email" placeholder="邮箱地址" type="text" />  
    </div>  
    <div class="form-item">  
        <input v-model="query.phone" placeholder="联系电话" type="text" />  
    </div>  
    <div class="form-item">  
        <input v-model.number="query.departmentId" placeholder="所属部门ID" type="number" min="0" style="width: 78px; display:inline-block" />  
    </div>  
  <div>  
    <button class="button-class"  type="submit">查询</button>  
    <button class="button-class" type="button" @click="onReset" >重置</button>  
  </div>  
</form>  
</div>
  `,
    // 组件属性
    // 这里没有使用到类似书籍类别这样的外部数组属性，若后续有类似需求可再添加
    props: {},
    // 自定义事件
    emits: ['search'],
    // 组件设置函数
    setup(props, { emit }) {
        const query = Vue.ref({
            type: '',
            status: '',
        });

        const onSearch = () => {
            emit('search', {...query.value});
        }

        const onReset = () => {
            query.value = {
                type: '',
                status: '',
            };
            emit('search', {}); // 重置时也可自动搜索全部
        }
        // 返回表单数据及方法
        return { query, onSearch, onReset };
    }
};